<template>
	<view class="qrDiv">
		<uni-section class="mb-10" title="二维码" sub-title="可以生成自定义二维码地址" type="line"></uni-section>
		<view class="coent">
			<uni-easyinput type="textarea" autoHeight v-model="content" placeholder="请输入内容"></uni-easyinput>
			<button class="btn-grad" @click="generate">生成</button>
		</view>


		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<view class="popup">
				<view class="close">
					<p>二维码</p>
					<uni-icons type="closeempty" size="24" @click="close" class="icon"></uni-icons>
				</view>
				<view class="canvas">
					<!-- <canvas class="ewm" id="QRcanvas" canvas-id="QRcanvas" bindlongtap="showCodeCanvas"></canvas> -->
					<canvas type="2d" style="width: 260px; height: 260px;" canvas-id="myQrcode" id="myQrcode"></canvas>
				</view>
				<view style="height: 1rem;"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import drawQrcode from "../static/js/weapp.qrcode.esm.js"
	export default {
		data() {
			return {
				content: '',
			};
		},
		methods: {
			generate() {
				const vm = this;
				if (!vm.content) {
					uni.showToast({
						title: '请输入需要生成的内容',
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: `请稍等……`
				})
				this.$refs.popup.open('center');
				setTimeout(() => {
					const query = wx.createSelectorQuery().in(this);
					query.select('#myQrcode').fields({
						node: true,
						size: true
					}).exec((res) => {
						console.log(res, '返回的包含node');
						var canvas = res[0].node
						// 调用方法drawQrcode生成二维码
						drawQrcode({
							canvas: canvas,
							canvasId: 'myQrcode',
							width: 260,
							padding: 30,
							background: '#ffffff',
							foreground: '#000000',
							text: vm.content,
						})
						uni.hideLoading();
						return
						// 获取临时路径（得到之后，想干嘛就干嘛了）
						wx.canvasToTempFilePath({
							canvasId: 'myQrcode',
							canvas: canvas,
							x: 0,
							y: 0,
							width: 260,
							height: 260,
							destWidth: 260,
							destHeight: 260,
							success(res) {
								console.log('二维码临时路径：', res.tempFilePath)
							},
							fail(res) {
								console.error(res)
							}
						})
					})
				}, 1000);
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="less">
	.qrDiv {
		background-color: #fff;

		.coent {
			padding: 12px 20px;
		}
	}

	::v-deep .uni-popup__wrapper {
		border-radius: 12px;
		width: 80vw;
		min-height: 30vh;
	}

	.popup {
		width: 100%;

		.close {
			text-align: center;
			padding: 12px 10px;
			position: relative;

			.icon {
				position: absolute;
				right: 12px;
				top: 10px;
			}
		}

		.canvas {
			margin: 0px auto;
			width: 90%;
			display: flex;
			justify-content: center;
		}
	}



	.btn-grad {
		background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
		margin: 10px;
		padding: 8px 45px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;
		box-shadow: 0 0 20px #eee;
		border-radius: 10px;
		display: block;
	}

	.btn-grad:hover {
		background-position: right center;
		/* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	}
</style>